/*
上下文 类似于vue的 provide/inject
*/
import React, { useContext } from 'react';
import ReactDOM from 'react-dom';
let MyContext = React.createContext();
let MyContext2 = React.createContext();
// console.log(MyContext2)
class GrandChild extends React.Component {
  static contextType = MyContext
  render() {
    console.log(this.context)
    return <>
      <h1>s孙子</h1>
    </>
  }
}

function GrandChild2() {
  let context = useContext(MyContext)
  let context2 = useContext(MyContext2)
  console.log(context, context2)
  return <h1>孙子2</h1>
}
class Child extends React.Component {
  render() {

    return <MyContext2.Provider value={6666}>
      <h1>儿子</h1>
      <GrandChild />
      <GrandChild2 />
    </MyContext2.Provider>
  }
}
class App extends React.Component {
  state = {
    count: 100
  }
  render() {
    return <div className=''>
      <MyContext.Provider value={this.state}>
        <Child />
      </MyContext.Provider>
    </div>;
  }
}

ReactDOM.render(<App />, document.getElementById('root'))